<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${ctx }/resources/lib/html5.js"></script>
<script type="text/javascript" src="${ctx }/resources/lib/respond.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/style.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/resources/lib/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/resources/fonts/fontawesome/font-awesome.min.css" media="all"/>
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<style type="text/css">
.page-container-top-left{
	float:left;
	margin-left: 10px;
	width: 49%;
	height: 300px;
	border: 2px solid #DDDDDD;
}
.page-container-top-right{
	float:left;
	margin-left: 10px;
	width: 49%;
	height: 300px;
	border: 2px solid #DDDDDD;
}
</style>
<title>控制台</title>
<script type="text/javascript" src="${ctx }/resources/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/lib/layer/2.1/layer.js"></script> 
<script type="text/javascript" src="${ctx }/resources/js/H-ui.js"></script> 
<script type="text/javascript" src="${ctx }/resources/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="${ctx }/resources/lib/echarts/echarts.min.js"></script> 
</head>
<body>
	<div class="page-container">
		<p class="f-20 text-success">欢迎使用AMS <span class="f-14">v1.0</span></p>
		<p>登录次数：${loginCount } </p>
		<p>上次登录IP：${loginIp } 上次登录时间：<fmt:formatDate value='${loginTime }' pattern='yyyy-MM-dd HH:mm:ss'/></p>
		<table class="table table-border table-bordered table-bg mt-20">
			<thead>
				<tr>
					<th colspan="2" scope="col">服务器信息</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th width="30%">服务器计算机名</th>
					<td><span id="lbServerName">${osName }</span></td>
				</tr>
				<tr>
					<td>服务器IP地址</td>
					<td>${hostIp }</td>
				</tr>
			</tbody>
		</table>
		<div id="memUsedRate" class="page-container-top-left"></div>
		<div id="jvmUsedRate" class="page-container-top-right"></div>
	</div>
</body>
<script type="text/javascript">
var memUsedRateChart,jvmUsedRateChart;
$(function(){
	memUsedRateChart = echarts.init(document.getElementById('memUsedRate')); 
	var memUsedRateOption = {
		title:{
			show: true,
			text: '主机内存使用率'
		},	
		tooltip : {
	        formatter: "{a} <br/>{b} : {c}%"
	    },
	    series: [
	        {
	            name: '主机内存使用率',
	            type: 'gauge',
	            detail: {formatter:'{value}%'},
	            data: [{value: '${memUsedRate}', name: '使用率'}]
	        }
	    ]
	};
	memUsedRateChart.setOption(memUsedRateOption);
	jvmUsedRateChart = echarts.init(document.getElementById('jvmUsedRate')); 
	var jvmUsedRateOption = {
		title:{
			show: true,
			text: 'JVM内存使用率'
		},
		tooltip : {
	        formatter: "{a} <br/>{b} : {c}%"
	    },
	    series: [
	        {
	            name: 'JVM内存使用率',
	            type: 'gauge',
	            detail: {formatter:'{value}%'},
	            data: [{value: '${jvmUsedRate}', name: '使用率'}]
	        }
	    ]
	};
	jvmUsedRateChart.setOption(jvmUsedRateOption);
	chartsResize();
	setInterval(function() {
		$.getJSON("${ctx}/monitor/data",{},function(jsonData){
			memUsedRateOption.series[0].data[0].value = jsonData.memUsedRate;
			memUsedRateChart.setOption(memUsedRateOption, true);
			jvmUsedRateOption.series[0].data[0].value = jsonData.jvmUsedRate;
			jvmUsedRateChart.setOption(jvmUsedRateOption, true);
			chartsResize();
	    });
	},5000);
});

function chartsResize(){
	window.onresize = memUsedRateChart.resize;
	window.onresize = jvmUsedRateChart.resize;
}
</script>
</html>